<template>
  <div>
    <el-row type="flex" justify="start">
      <el-col :span="20">
        <el-upload
          :disabled="uploadDisabled"
          action="#"
          :limit="limit"
          :class="{ uploadShow: fileList.length >= limit }"
          list-type="picture-card"
          :on-change="onChange"
          :file-list="fileList"
          :before-upload="beforeUpload"
          :http-request="httpRequest"
          :on-remove="onRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-col>
      <el-col :span="2" :pull="loadPull">
        <el-progress
          v-show="isShowProgress"
          type="circle"
          :percentage="progress"
          status="success"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import COS from "cos-js-sdk-v5";
const cos = new COS({
  SecretId: "AKIDqRmrfCSSBcmfIelbBUWHlytXx6ybx3sQ",
  SecretKey: "IK5cstd6ICqDJ8gxxg9LGuHNCk12mFQL",
});
export default {
  props: {
    limit: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      fileList: [],
      isShowProgress: false,
      progress: 0,
      loadPull: this.limit === 1 ? 15 : 11,
      uploadDisabled: false,
    };
  },
  methods: {
    loadPullAuto(data) {
      if (this.fileList.length === data) {
        this.loadPull = this.limit === 1 ? 15 : 11;
      }
    },
    onRemove(file, fileList) {
      this.fileList = fileList;
      this.loadPullAuto(0);
    },
    onChange(file, fileList) {
      this.fileList = fileList;
      this.loadPullAuto(0);
    },
    beforeUpload(file) {
      this.loadPullAuto(1);

      const fileSize = file.size;
      const maxSize = 2 * 1024 * 1024;
      // 判断用户上传的图片文件是否大于设定的字节
      if (fileSize > maxSize) {
        this.$message.warning("只能上传小于2M的图片");
        return false;
      }
      // 设置白名单，用于判断用户上传的文件是否存在白名单中
      const whiteList = ["image/jpeg", "image/png"];
      if (!whiteList.includes(file.type)) {
        // 如果不在白名单中，则不执行下面的代码，return 返回
        this.$message.warning("暂时只支持 jpeg / png 格式图片");
        return false;
      }
    },
    httpRequest(params) {
      if (this.limit !== 1) {
        this.uploadDisabled = true;
        this.$message.warning("正在上传图片,请耐心等待");
      }
      this.isShowProgress = true; //  关闭弹窗
      // 腾讯云调用 sdk进行上传
      cos.putObject(
        {
          Bucket: "test-21-12-1309020635" /* 必须 */,
          Region: "ap-nanjing" /* 存储桶所在地域，必须字段 */,
          Key: params.file.name /* 必须 */,
          StorageClass: "STANDARD",
          Body: params.file, // 上传文件对象
          onProgress: (progressData) => {
            // 用于设置进度条
            this.progress = progressData.percent * 100;
          },
        },
        (err, data) => {
          if (!err) {
            this.uploadDisabled = false;
            this.fileList.forEach((item) => {
              item.status = "success";
            });
            this.fileList[this.fileList.length - 1].url =
              "http://" + data.Location;

            if (this.fileList.length === 1) {
              this.loadPull = this.loadPull - 5;
            }
          }
          this.isShowProgress = false;
        }
      );
    },
  },
};
</script>

<style lang="less" scoped>
.uploadShow {
  /deep/ .el-upload--picture-card {
    display: none;
  }
}
</style>